<script setup>
import {
    getCourseListService,
    selectSysMsgService,
    getHotCourseListService
} from '@/api/LoginManager.js'
import {
  View
} from '@element-plus/icons-vue'
import { ref } from 'vue'
import {Search} from '@element-plus/icons-vue'
import router from '@/router'
const condition1Ref = ref('课程类型')
const condition2Ref = ref('课程难度')
const condition3Ref = ref('学分')
const condition1 = ['课程类型','人文','科技']
const condition2 = ['课程难度','高难度','中难度']
const condition3 = ['学分','5分', '3分','2分']

const total = ref(0)
const params = ref({
  courseName:'',
  pageNum:1,
  pageSize:20,
  condition1:'',
  condition2:'',
  condition3:''
})
const CourseVoList = ref([])
const CourseVo = ref({
    id:'',
    courseName:'',
    teacherName:'',
    courseStar:'',
    coursePoint:'',
    courseTime:'',
    courseTimeStr:'',
    selectTotal:'',
    courseType:'',
    courseTypeDesc:'',
    tags:[]
})

const getCourseList = async () => {
    params.value.condition1 = condition1Ref.value
    params.value.condition2 = condition2Ref.value
    params.value.condition3 = condition3Ref.value
    const res = await getCourseListService(params.value);
    CourseVoList.value = res.data.data
}
getCourseList();

const HotCourseVoList = ref([])
const HotCourseVo = ref({
    id:'',
    courseName:'',
    teacherName:''
})

const getHotCourseList = async () => {
    const res = await getHotCourseListService(params.value);
    HotCourseVoList.value = res.data.data
}
getHotCourseList();

const SysMsgList = ref([])
const SysMsgVo = ref({
      id:'',
      sysNote:'',
      createTime:'',
      createTimeStr:'',
})
const selectSysMsg = async () => {
    const res = await selectSysMsgService(params.value)
    SysMsgList.value = res.data.data
}
selectSysMsg()

const taskDetailBtn = (id) => {
    router.push({ path: '/main/taskDetail', query: { courseId: id}});
}

const searchBtn = async () => {
    await getCourseList();
}
</script>
<template>
    <!-- 轮播图 -->
    <div class="cus-header">
        <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in 4" :key="item">
                <!-- <el-image :src="lb1" alt="" style="width: 100%;"/> -->
            </el-carousel-item>
        </el-carousel>
    </div>

    <!-- 首页筛选框 -->
    <div class="cus-search-task">
        <el-row :gutter="20">
            <el-col :span="19">
                <div class="grid-content bg-purple cus-border-shadow">
                    <div class="search-checkbox left">
                        <div class="cus-search">
                            
                            <el-input
                            v-model="params.courseName"
                            style="max-width: 400px;min-height: 40px;"
                            placeholder="Please input"
                            class="input-with-select"
                            >
                            
                            <template #append>
                                <el-button @click="searchBtn" type="primary" :icon="Search" />
                            </template>
                            </el-input>
                        </div>
                        <div class="search-condition">  
                            <div style="margin-left: 10px;">  
                                <el-radio-group v-model="condition1Ref" >  
                                    <el-radio size=""
                                    v-for="city in condition1" 
                                    :key="city" :value="city" 
                                    >
                                    <div style="font-size: 16px;">
                                        {{ city }}
                                    </div>
                                    </el-radio>  
                                </el-radio-group>  
                            </div>  
                        </div>
                        <div class="search-condition">  
                            <div style="margin-left: 10px;">  
                                <el-radio-group v-model="condition2Ref">  
                                    <el-radio
                                    v-for="city in condition2" 
                                    :key="city" :value="city" :label="city"
                                    >
                                    <div style="font-size: 16px;">
                                        {{ city }}
                                    </div>
                                    </el-radio>  
                                </el-radio-group>  
                            </div>  
                        </div>
                        <div class="search-condition">  
                            <div style="margin-left: 10px;">  
                                <el-radio-group v-model="condition3Ref">  
                                    <el-radio 
                                    v-for="city in condition3" 
                                    :key="city" :value="city" :label="city"
                                    >
                                    <div style="font-size: 16px;">
                                        {{ city }}
                                    </div>
                                    </el-radio>  
                                </el-radio-group>  
                            </div>  
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple cus-border-shadow " style="background: #fff;  ">
                    <div class="cus-jump-quick" >
                        <h3 style="padding-left: 10px;">公告</h3>
                        <ul class="cus-task-ul" v-for="vo in SysMsgList" :key="vo.id">
                            <li>
                                <el-link :underline="false" class="cus-jump-quick-note" type="primary">
                                    {{ vo.sysNote }}
                                </el-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>

    <!-- 主体内容 -->
    <div style="margin-top: 5px;">
        <el-row :gutter="20">
            <el-col :span="19">
                <div class="grid-content bg-purple ">
                    <el-row class="task-cus-content-card" :gutter="25">
                        <el-col :span="6" v-for="vo in CourseVoList" :key="vo.id" class="task-el-col">
                            <el-card :body-style="{ padding: '0px' }" >
                                <div class="content-title">
                                    {{ vo.courseName }}
                                </div>
                                <div style="padding: 14px;position: relative;" >
                                    <div class="cus-views">
                                        <span class="time">
                                            <el-tag type="primary"  effect="plain">
                                                <el-icon><View/></el-icon>
                                                {{ vo.selectTotal }}
                                            </el-tag>
                                            
                                        </span>
                                    </div>
                                    <div>
                                        <el-rate
                                            v-model="vo.courseStar"
                                            disabled
                                            show-score
                                            text-color="#ff9900"
                                            score-template="{value} 难度"
                                        />
                                    </div>
                                    <div class="bottom clearfix">
                                    <time class="time">授课老师：{{ vo.teacherName }} </time>
                                    <div class="bottom clearfix"></div>

                                    <div class="bottom clearfix"></div>
                                    <span class="time">标签: </span>
                                    <el-tag v-for="tag in vo.tags" :key="tag"  type="primary">{{ tag }}</el-tag>
                                    <div class="bottom clearfix"></div>
                                    <span class="time">
                                        开始日期 {{ vo.courseTimeStr }}
                                    </span>
                                    <el-button 
                                    @click="taskDetailBtn(vo.id)"
                                    type="text" class="button">课程详情</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
            </el-col>


            <el-col :span="5" class="cus-task-content-right" >
                <div class="grid-content bg-purple cus-border-shadow ">
                    <div class="cus-jump-quick" >
                        <span class="cus-order-header">热点课程</span>
                        <ul class="cus-task-ul" v-for="vo in HotCourseVoList" :key="vo.id">
                            <li>
                                <el-link :underline="false" class="cus-jump-quick-note" type="primary">
                                    {{vo.courseName}}--{{ vo.teacherName }}</el-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<style lang="scss" scoped>
ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
}
ul li{
    display: block;
    height: 45px;
    line-height: 45px;
    padding-left: 10px;
}
    .cus-border-shadow{
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        background-color: #fff;
        border-radius: 2px;
    }
    .cus-header{
        margin-top: 20px;
    }
    .search-checkbox{
        padding: 20px;
        background-color: #fff;
        .cus-search{
            display: flex;
            flex: 1;
            justify-content: center;
            margin-bottom: 20px;
        }
        .search-condition{
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            border-bottom: #475669;
        }
    }

    // 筛选
    .cus-search-task{
        .right,.left{
            min-height: 200px;
        }
    }

    // 右侧 排行
    .cus-jump-quick {
        .cus-task-ul{
            display: flex;
            flex-direction: column;
            justify-content: start;
            padding: 7px    ;
        }
        .cus-jump-quick-note{
            font-size: 16px;
        }
        .cus-order-header{
            padding-left: 10px;
            font-size: 17px;
            font-weight: 700px;
        }
    }

    // 卡片 右侧排行
    .cus-task-content-right{
        margin-top: 26px;
        border-radius: 2px
    }

    // 页面列表页内容
    .task-cus-content-card{
        .task-el-col{
            margin-top: 25px;
        }
        .time{
            font-size: 13px;
        }
        .bottom {
            margin-top: 13px;
            line-height: 12px;
        }

        .button {
            padding: 0;
            float: right;
        }

        .image {
            width: 100%;
            display: block;
        }

        .cus-views{
            position: absolute;
            top: 0;
            right: 0;
            color: #F5F5F5;
        }
        .neet-header{
            cursor: pointer;
            font-size: 16px;
            transition: 0.2s;
        }
        .neet-header:hover{
            color: #639ffd;
            font-weight: 600px;
        }
        .content-title{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100px;
            background: linear-gradient(to left, #d7fbe8, white);
            font-size: 18px;
        }

    }


  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }


</style>
